<template>
  <div id="dialogImgDetail">
    <el-dialog
      class="about-set"
      :title="dialogData.title"
      :visible.sync="dialogData.isShow"
      width="700px"
      :before-close="labelHandleClose"
    >
      <div class="task-detail-con">
        <div class="detail-left">
          <img :src="formData.avatar" alt="头像" />
        </div>
        <div class="detail-right">
          <dl>
            <dt>
              {{ formData.nickname }}
              <template v-if="dialogData.type === 'TEXT'">
                <strong class="detail-top">{{ formData.categoryName }}</strong>
                <!-- <span>;</span> -->
                ;
                <strong class="detail-top">{{ formData.overdue }}</strong>
                <strong class="detail-top">{{ formData.level }}</strong>
                <strong class="detail-top">{{ formData.courseLevel }}</strong>
              </template>
            </dt>
            <dd>
              <span>{{ formData.dpAccount }}</span>
              <span>创建时间：{{ formData.submit | timeToTime }}</span>
              <span v-if="formData.approvedTime"
                >批改时间：{{ formData.approvedTime | timeToTime }}</span
              >
            </dd>
            <dd>
              <span v-html="formData.content"></span>
            </dd>
            <template v-if="dialogData.type === 'TEXT'">
              <dd>
                <i class="el-icon-link"></i>
                {{ formData.taskTitle }}
              </dd>
              <dd class="as-code-number">作业码：{{ formData.identCode }}</dd>
            </template>
          </dl>
          <!--查看图片-公共组件-->
          <div v-if="showType === 'VIDEO'" class="video-face-box">
            <videoFace :vid="vid"></videoFace>
          </div>
          <div
            v-else
            class="pic-box-show"
            :class="imgList.length > 1 ? '' : 'single-pic'"
          >
            <showImg v-if="imgList.length > 0" :img-list="imgList"></showImg>
          </div>
          <ul class="foot-list">
            <li>评论 {{ formData.commentNum }}</li>
            <li>点赞 {{ formData.praiseNumber }}</li>
            <li>分享{{ formData.shareAmount }}</li>
            <li>最新编辑者 {{ formData.newOperName }}</li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import showImg from '@common/showImg'

export default {
  name: 'DialogImgDetail',
  msg: '图片详情-弹窗-公共组件',
  components: {
    showImg
  },
  props: ['dialogData'],
  data() {
    return {
      id: '',
      loading: false,
      showType: '', // 显示类型，作品内类-图文 【TEXT】 小视频【VIDEO】
      formData: {},
      vid: '',
      imgList: []
    }
  },
  mounted() {
    this.id = this.dialogImgData.id
    this.getDetail()
  },
  methods: {
    /* 获取详情 */
    getDetail(id) {
      this.loading = true
      let url = `/system/commentExamined/worksCommentExamined/detail/${id}`
      this.pubRequire(
        'get',
        url,
        '',
        (response) => {
          let data = response.data
          this.loading = false
          this.formData = data
          this.showType = data.workType || data.jobType
          if (this.showType === 'TEXT') {
            this.getImgList(JSON.parse(data.imgInfo))
          } else {
            this.vid = data.video
          }
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.msg,
            type: 'warning'
          })
        }
      )
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.dialogData.isShow = false
    }
  }
}
</script>

<style lang="less">
#dialogImgDetail {
  .task-detail-con {
    display: table;
    color: #333;
    margin: 0 20px;

    .detail-left,
    .detail-right {
      display: table-cell;
    }

    .detail-left {
      width: 80px;
      vertical-align: top;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .pic-box {
      width: 504px;
      height: 300px;

      &.single-pic {
        height: 200px;
      }
    }

    .detail-right {
      dl {
        margin-bottom: 20px;

        dt {
          font-size: 15px;
          line-height: 30px;
          margin-bottom: 10px;
          font-weight: bold;
        }

        dd {
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 8px;

          &:nth-of-type(1) {
            span {
              margin-right: 10px;
            }
          }
        }
      }

      ul.foot-list {
        padding: 20px 0 15px;
        overflow: hidden;

        li {
          float: left;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
